<template>
    <el-container class="help-question-list-page">
        <div class="w-1/2 mx-auto">
            <div
                class="tab-item"
                v-for="item in categoryList"
                :key="item.id">
                <div @click="onShow(item)" class="tab-title cursor-pointer flex items-start">
                    <img :src="item.icon">
                    <div>
                        <div class="main-title">{{ item.name }}</div>
                        <div class="sub-title">{{ item.description }}</div>
                    </div>
                </div>
                <div
                    class="tab-little-item box-border"
                    v-if="item.show">
                    <div v-for="(items, j) in item.problems" :key="j">
                        <div
                            @click="toDetail(items.id, item.id)"
                            class="tab-mini-item cursor-pointer">
                            {{ items.name }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-container>
</template>

<script>
import { Container } from 'element-ui';

export default {
    components: {
        ElContainer: Container,
    },
    data() {
        return {
            id: '',
            typeId: '',
            loading: false,
            categoryList: [],
            content: {},

            selected: '',
            detail: '',
        };
    },
    computed: {
        helpTitle() {
            return { ...this.$store.state.helpTitle };
        },
    },
    methods: {
        onShow(e) {
            e.show = !e.show;
        },

        getQuesList() {
            this.loading = true;
            API.get('../problem_category').then(res => {
                const list = res || [];

                list.map(item => {
                    item.show = item.id === this.typeId;
                    return item;
                });

                if (!this.typeId) list[0].show = true;

                this.categoryList = list;
            }).finally(() => this.loading = false);
        },

        toDetail(id, typeId) {
            this.$router.push({
                name: 'Help.Question',
                query: {
                    id,
                    typeId,
                },
            });
        },
    },
    mounted() {
        const query = this.$route.query;

        this.id = +query.id || '';
        this.typeId = +query.typeId || '';

        this.getQuesList();

        const title = {
            ...this.helpTitle,
            ...{
                two: {
                    title: '问题列表',
                    path: '/helps/container/question/List',
                },
            },
        };
        this.$store.commit('setHelpTitle', title);
    },
};
</script>

<style lang="scss" scoped>
.help-question-list-page {
    width: 100%;
    max-width: 1024px;
    margin: 0 auto;

    @media (max-width: 960px) {
        .w-1\/2 {
            width: 100%;
        }
        .mx-auto {
            margin-left: 20px;
            margin-right: 20px;
        }
    }

    .tab-item {
        margin-bottom: 48px;

        @media (max-width: 960px) {
            margin-bottom: 36px;
        }
    }

    .tab-title {
        img {
            width: 50px;
            margin-right: 20px;

            @media (max-width: 960px) {
                width: 32px;
                margin-right: 14px;
            }
        }

        .main-title {
            font-size: 30px;
            line-height: 42px;
            font-weight: 500;
            color: rgb(87, 87, 87);

            @media (max-width: 960px) {
                font-size: 18px;
                line-height: 25px;
            }
        }

        .sub-title {
            font-size: 12px;
            line-height: 17px;
            color: rgb(155, 155, 155);
            margin-top: 5px;
        }
    }

    .tab-mini-item {
        position: relative;
        font-size: 18px;
        color: rgb(45, 112, 174);
        line-height: 25px;
        margin-bottom: 19px;
        padding-left: 19px;

        &::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: rgb(45, 112, 174);
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -3px;
        }

        @media (max-width: 960px) {
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 16px;
        }
    }

    .tab-little-item {
        margin-top: 28px;
        padding-left: 70px;

        @media (max-width: 960px) {
            margin-top: 17px;
            padding-left: 46px;
        }
    }
}
</style>
